import React, { Component } from 'react';

import '../styles/Register.scss'

import { CloseOutline } from 'antd-mobile-icons'

import { user_register, user_login } from "../api/index";

import { Grid, Form, Button, Input, Toast } from 'antd-mobile'

class Register extends Component {
  async zhuce() {
    var res = await this.refs.fromRef.getFieldValue()
    var res2 = await user_login()
    var i = res2.data.findIndex((item) => {
      return item.phone == res.phone
    })
    if (i == -1) {
      await user_register(res)
      Toast.show({
        icon: 'success',
        content: '注册成功',
      })
    }
    else {
      Toast.show({
        icon: 'fail',
        content: '手机号已存在',
      })
    }
  }
  go() {
    this.props.history.push('/login')
  }

  render() {
    return (
      <div className='register'>
        <div className="top">
          <CloseOutline fontSize={16} />
        </div>
        <div className="main">
          <div className="title">
            欢迎注册优优
          </div>
          <Form
            ref="fromRef"
            onFinish={() => { this.zhuce() }}
            layout='horizontal'
            footer={
              <Button block type='submit' style={{ height: '35px' }} color='primary' size='mini'>
                注册
              </Button>
            }
          >
            <Form.Item
              style={{ paddingLeft: 0 }}
              name='phone'
              rules={[{ required: true, message: '账号不能为空' }]}
            >
              <Input placeholder='请输入账号' />
            </Form.Item>
            <Form.Item
              style={{ paddingLeft: 0 }}
              name='name'
              rules={[{ required: true, message: '昵称不能为空' }]}
            >
              <Input placeholder='请输入你的昵称' />
            </Form.Item>
            <Form.Item

              style={{ paddingLeft: 0 }}
              name='pass'
              rules={[{ required: true, message: '密码不能为空' }]}
            >
              <Input placeholder='请输入密码' type='password' />
            </Form.Item>
            <Form.Item

              style={{ paddingLeft: 0 }}
              name='pass2'
              rules={[{ required: true, message: '确认密码不能为空' }]}
            >
              <Input placeholder='请输入确认密码' type='password' />
            </Form.Item>
          </Form>
          <div className="go" onClick={() => { this.go() }}>
            我有账号，去登录
          </div>
        </div>
      </div>

    );
  }
}

export default Register;